<template>
<div class="comLabel flex_sb">
	<div class="nav-left">
		<div class="nav-left-item" @click="open('chain')">
      <div class="one">产业链</div>
		</div>
		<div class="nav-left-item" @click="open('city')">
      <div class="one">区域</div>
		</div>
		<div class="nav-left-item" :key="item.id" v-for="(item,index) in labelList">
			<div @click="categoryClickMain(item)" class="one" :class="[(oneActive==item.id)?'active':'']">
			{{item.name.length>5?item.name.slice(0,5):item.name}}
			</div>
			<div @click="categoryClickMain(item1,item)" class="two" :class="[label_id==item1.id?'active':'',oneActive==item.id?'':'noshow']" v-for="item1 in item.labels" :key='item1.id'>{{item1.label.length>5?item1.label.slice(0,5):item1.label}}</div>
		</div>
	</div>
	
	<div class="nav-right">
    <div class="r_top">
      <div class="sx_div">
        <div class="c_item" v-if="query.chain_name">
          {{query.chain_name}}
          <van-icon class="close" name="clear" size="18" color="#CCCCCC" @click="clearChain"></van-icon>
        </div>
        <div class="c_item" v-if="label_name">
          {{label_name}}
          <van-icon class="close" name="clear" size="18" color="#CCCCCC" @click="clearLabel"></van-icon>
        </div>
        <div class="c_item" v-if="query.city_name">
          {{query.city_name}}
          <van-icon class="close" name="clear" size="18" color="#CCCCCC" @click="clearCity"></van-icon>
        </div>
      </div>
      <div class="total">为您找到 <span style="color: #FA8A26;">{{ total>10000?'10000+':total }}</span> 个相关结果</div>
    </div>
    <van-list
      v-model="isLoad"
      :finished="isfinish"
      finished-text="没有更多了"
      @load="getMore">
      <div class="list_item flex_sb" v-for="(item,index) in list" :key="index" @click="toDetail(item.identification)">
        <div class="img img_small">
          <img v-if="item.logo&&!item.isErr" @error="item.isErr=true;$forceUpdate()" :src="item.logo"></img>
          <div v-if="(item.isErr||!item.logo)" class="logo_name">{{ (!item.logo||item.logo.indexOf('.')>-1)? item.company_name.substring(0,4) : item.logo}}</div>
        </div>
        <div class="right_div right_div_small">
          <div class="r_title">{{item.company_name}}</div>
          <div class="h6"></div>
          <div class="r_small">{{item.park_name}}</div>
          <div class="chain_div" v-if="item.chain_name.length>0" v-for="(chain,index) in item.chain_name.slice(0,2)" :key="index">{{chain}}</div>
          <div class="h6"></div>
          <div class="r_small">
            <span>{{item.address||'-'}} </span> 
          </div>
        </div>
      </div>
    </van-list>
	</div>

    <van-popup v-model="showPicker" round position="bottom">
    <van-picker
      v-show="type=='chain'"
      value-key="chain_name"
      show-toolbar
      :columns="chainList"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
    <van-picker
      v-show="type=='city'"
      value-key="city_name"
      show-toolbar
      :columns="cityList"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
  </van-popup>
</div>
</template>

<script> 
import { company } from '@/api/api.js'
export default{
	props:['keywords'],
	components:{
	},
	data(){
    return {
      showPicker: false,
      type: '',
      
			chainList:[],
			cityList:[],
			
			labelList:[],
			label_name:'',
			label_id:'',
			page:0,
			isfinish:false,
			isLoad:false,
			total:'',
			query:{},
			queryData:{
				chain_id:'',
				city_id:''
			},
			list:[],
			
			oneActive: '',
		}
	},
  async created() {
    this.getLabelList()

		let chainList = JSON.parse(sessionStorage.chainList)
    chainList.unshift({chain_name: '不限',id:''})
    this.chainList = chainList

    this.cityList = JSON.parse(sessionStorage.cityList)
		
		
		if(sessionStorage.com_chain){
			let chain = JSON.parse(sessionStorage.com_chain)
			sessionStorage.com_chain = ''
			this.query.chain_name = chain.chain_name
			this.queryData.chain_id = chain.id
		}
		
		this.init()
	},
	methods:{
    open(type) { 
      this.type = type
      this.showPicker = true
    },
    onConfirm(val,index) {
      this.showPicker = false
      let item = {}
      if (this.type == 'chain') { 
        this.query.chain_name = val.chain_name
        this.queryData.chain_id = val.id
      } else {
        index.forEach((i, k) => {
          if (i) {
            if (k == 0) {
              item = this.cityList[i]
              this.query.city_name = item.city_name
              this.queryData.city_id = item.id
            } else {
              item = item.children[i]
              this.query.city_name = item.city_name1 || item.city_name
              this.queryData.city_id = item.id
            }
          } else if (k == 0) { 
            this.query.city_name = '不限'
            this.queryData.city_id = ''
          }
        })
      }
      this.init()
    },
		getLabelList(){
			company.getLabel().then(res=>{
				this.labelList = res.data
			})
		},
    categoryClickMain(item, itemp = false) {
      console.log(item)
			if(this.oneActive == item.id){
				this.oneActive = ''
				return
			}
			if(item.id==0){
				this.oneActive = item.id
				this.label_id= item.id
				this.childrenList = [{label:'不限',id:''}]
				this.init()
				return
			}
			if(!itemp){
				this.oneActive = item.id
				this.label_name= item.labels[0].label
				this.label_id= item.labels[0].id
			}else{
				this.oneActive = itemp.id
				this.label_id= item.id
				this.label_name= item.label
			}
			this.init()
		},
		clearChain(){
			this.query.chain_name = ''
			this.queryData.chain_id = ''
			this.init()
		},
		clearCity(){
			this.query.city_name = ''
			this.queryData.city_id = ''
			this.init()
		},
		clearLabel(){
			this.oneActive = ''
			this.label_id = ''
			this.label_name = ''
			this.init()
		},
    getMore() {
			if(this.page == 0){
				return
			}
			this.page += 1
			this.getCList()
		},
		init(){
			this.list = []
			this.$nextTick(()=>{
				this.page = 1
				this.isfinish = false
				this.getCList()
			})
		},
		getCList(){
			if(this.isfinish){
				return
			}
			this.isLoad = true
			
			let data = {
				...this.queryData,
				keywords:this.keywords,
				label_id:this.label_id,
				page:this.page||1,
			}
			if(!data.keywords &&!data.chain_id ){
				data.order = 'score'
				data.fromtype = 'mychainid'
			}else{
				data.order = ''
			}
			
			company.getList(data).then(res=>{
				if(this.page==1){
					this.list = res.data.data
				}else{
					this.list.push(...res.data.data)
				}
				this.total = res.data.total
				if(this.list?.length >= res.data.total){
					this.isfinish = true
				}
				this.isLoad = false
			})
		},
		toDetail(identification) {
      this.$router.push({name: 'companyDetail', query: {identification}})
    }
	}
}
</script>

<style scoped lang="scss">
.total{
  font-size: 10px;
  padding: 10px;
  background: #fff;
}
.comLabel{
	width:100%;
	height:100%;
	.nav-right {
		width: 75%;
		height: 100%;
    background: #fff;
    overflow: auto;
    position: relative;
    .r_top{
      position: sticky;
      top: 0;
      background: #fff;
      z-index: 10;
      box-shadow: 0 0 10px 0 #0001;
    }
		.shaixuan{
			height:30px;
			padding-left:10px;
		}
		.c_item{
			display: inline-block;
			margin-left: 10px;
			margin-top: 10px;
			height: 25px;
			line-height: 25px;
			padding: 0 10px;
			background: #F5F5F5;
			border-radius: 5px;
			font-size: 11px;
			color: #000000;
			position: relative;
			.close{
				position: absolute;
				right:-6px;
				top:-6px;
			}
		}
	}
	.nav-left {
		width: 25%;
		height:100%;
		background: #f6f6f6;
    overflow: auto;
	.nav-left-item {
		.one{
			height: 50px;
			// border-right: solid 1px #f1f1f1;
			border-bottom: solid 1px #f1f1f1;
			font-size: 14px;
			display: flex;
			align-items: center;
			// justify-content: center;
			text-indent: 10px;
			position: relative;
			
		}		
		.two{
			height: 50px;
			border-right: solid 1px #f1f1f1;
			border-bottom: solid 1px #f1f1f1;
			font-size: 12px;
			display: flex;
			color: #666;
			align-items: center;
			// justify-content: center;
			text-indent:16px;
			transition: all 0.5s;
			opacity: 1;
		}		
		.noshow{
			height: 0px;
			opacity: 0;
			overflow: hidden;
			display: none;
		}
		.shang{
			position: absolute;
			width: 6px;
			height: 6px;
			border-top: 1px solid #ff9933;
			border-right: 1px solid #ff9933;
			transition: all 0.5s;
			transform: rotate(-45deg);
			right: 4px;
			top: 24px;
		}
		.xia{
			border-top: 1px solid #333;
			border-right: 1px solid #333;
			transform: rotate(135deg);
			top: 22px;
		}
	}
		.active {
			font-size: 13px;
			color: #FA8A26;
			background: #fff;
			position: relative;
			&::after{
				content:'';
				position: absolute;
				left:5px;
				top:18px;
				width: 3px;
				height: 14px;
				background: linear-gradient(153deg, #FA8A2622, #FA8A26);
				border-radius: 2px;
			}
		}
	}
}

.sx_div{
	width:100%;
	overflow-x: auto;
	white-space: nowrap;
}

.list_item{
	width: calc(100% - 40px);
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0px 1px 10px 0px #0A477519;
	margin: 10px 10px 15px;
	position: relative;
	.img_small{
		height: 40px !important;
		width: 40px !important;
		border-radius: 4px !important;
		text-align: center;
		font-size: 14px !important;
	}
	.img{
		width: 100px;
		height: 70px;
		border-radius: 6px;
		overflow: hidden;
		position: relative;
		box-shadow: 0 0 5px 0 rgba(0, 0,0, 0.1);
		.logo_name{
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			background: #138AF2;
			color: #fff;
		}
		img{
			width: 100%;
			height: 100%;
		}
	}
	.right_div_small{
		width: calc(100% - 50px) !important
	}
	.right_div{
		width: calc(100% - 110px);
		.r_title{
			font-size: 15px;
			font-weight: 600;
			color: #333;
		}
	}
}

.r_small{
  font-size: 11px;
  color: #666666;
}
.chain_div{
  background-color: #FA8A2622;
  color: #FA8A26;
  padding: 0 4px;
  height: 18px;
  line-height: 18px;
  border-radius: 3px;
  font-size: 10px;
  margin: 8px 5px 0 0;
  display: inline-block;
}
</style>